<template>
    <div class="conatainer" v-loading="loadingPage">
        <div class="top-wrap">
            <div class="top-wrap-item bill-num-wrap">
                <h2>待结算金额（元）</h2>
                <div class="bill-num-con">
                    <div class="bill-left-wrap">
                        <p>{{ expendTotalMoney }}</p>
                    </div>
                    <div class="bill-right-wrap">
                        <img src="../../assets/img/bill-icon.png" />
                    </div>
                </div>
            </div>
            <div class="top-wrap-item account-wrap" v-if='showAccount'>
                <h2>结算账户信息</h2>
                <ul class="account-con">
                    <li class="account-item">
                        <label>开户行</label>
                        <p>{{ accountInfo.values.payee_bank}}</p>
                        <p style="color:#30b30e;margin-left:10px" @click="copyEv(accountInfo.values.payee_bank)">复制</p>
                    </li>
                    <li class="account-item">
                        <label>开户姓名</label>
                        <p>{{ accountInfo.values.payee_name }}</p>
                        <p style="color:#30b30e;margin-left:10px" @click="copyEv(accountInfo.values.payee_name)">复制</p>
                    </li>
                    <li class="account-item">
                        <label>账户账号</label>
                        <p>{{ accountInfo.values.payee_no }}</p>
                        <p style="color:#30b30e;margin-left:10px" @click="copyEv(accountInfo.values.payee_no)">复制</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bill-list-wrap">
            <h3 class="flex-center">账单流水</h3>
            <div class="bill-list">
                <el-table :data="list" style="width: 100%" header-cell-class-name="header-cell" cell-class-name="cell-style">
                    <el-table-column prop="xuhao" label="序号" align="center" width="80"> </el-table-column>
                    <el-table-column prop="month" label="时间" align="center"> </el-table-column>
                    <el-table-column prop="num" label="金额" align="center">
                        <template slot-scope="scope">
                            <p class="num">{{ scope.row.expend_money }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="settleName" label="账单状态" align="center"> </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <a :href="scope.row.invoice" v-if="scope.row.invoice">下载发票</a>
                            <a v-else>暂无发票</a>
                            <a @click="toBillDetail(scope.row.id)">账单详情</a>
                        </template>
                    </el-table-column>
                    <div slot="empty" class="empty">
                        <no-data></no-data>
                    </div>
                </el-table>
            </div>
        </div>
        <pagination-footer :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList"></pagination-footer>
    </div>
</template>

<script>
import PaginationFooter from '@/components/PaginationFooter.vue';
import { userBillList,companyAccount } from '@/api/user';
import NoData from '@/components/NoData.vue';
export default {
    components: {
        PaginationFooter,
        NoData,
    },
    props: {
        tabIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            loadingPage:true,
            expendTotalMoney: 0,
            list: [],
            page: 1,
            limits: 15,
            total: 0,
            accountInfo:{},
            showAccount:false,
        }
    },
    created() {
        this.getList();
        this.getAccountInfo()
    },
    methods: {
        getList() {
            const that = this;
            userBillList({
                page: that.page,
                limits: that.limits,
            }).then(res => {
                that.loadingPage = false;
                that.showPage = true;
                if (res.code == 0) {
                    that.expendTotalMoney = res.data.expendTotalMoney
                    that.list = res.data.list.data;
                    that.total = res.data.list.total;
                }
            })
        },
        getAccountInfo(){
            companyAccount().then(res => {
                if (res.code == 0) {
                    if(res.data){
                        this.accountInfo = res.data;
                        this.showAccount = true;
                    }
                }
            })
        },
        toBillDetail(id) {
            this.$router.push({
                path: '/user/bill_detail',
                query: { 
                    id,
                },
            })
        },
        copyEv(no) {
            navigator.clipboard
                .writeText(no)
                .then(() => {
                    this.$message.success("复制成功");
                })
                .catch((err) => {
                    // 复制失败
                    console.error("复制失败");
                });
        },
    }
}
</script>
<style>
.cell-style {
    font-size: 14px;
    color: #8c93a8;
    height: 50px;
}
</style>
<style lang="scss" scoped>
$supplier-color: #30b30e;

.flex2 {
    flex: 4;
}

.flex4 {
    flex: 5;
}

.flex1 {
    flex: 1;
}

.conatainer {
    width: 100%;
    padding-bottom: 130px;
}
.top-wrap {
    width: 100%;
    height: 232px;
    display: flex;
    margin-top: 12px;
    .top-wrap-item {
        flex: 1;
        padding: 14px 18px 0;
        background: #ffffff;
        border-radius: 8px;
    }
    .bill-num-wrap {
        .bill-num-con {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
        }
        p {
            margin-top: 6px;
            font-family: "DIN-BOLD";
            color: #fe7b00;
            font-size: 48px;
        }
        .bill-right-wrap {
            width: 103px;
            height: 107px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .account-wrap {
        margin-left: 12px;

        .account-con {
            li {
                width: 100%;
                height: 50px;
                background: #f7f9fa;
                border-radius: 8px;
                font-size: 14px;
                margin-top: 12px;
                padding:0 20px;
                box-sizing: border-box;
            }
            .account-item{
                display: flex;
                align-items: center;
            }
            label {
                width: 68px;
            }
        }
    }
}

.bill-list-wrap {
    color: #8c93a8;
    margin-top: 14px;
    background: #ffffff;
    h3 {
        height: 38px;
        background: #ffffff;
        border-radius: 4px 4px 0px 0px;
        color: #333;
    }
    a {
        color: #1777ff;
        cursor: pointer;
        &:first-of-type {
            margin-right: 30px;
        }
        &:hover {
            text-decoration: underline;
        }
    }
    .num {
        font-family: "DIN-BOLD";
    }
}
</style>
